<template>
  <div
    class="h-full min-h-0 overflow-hidden flex items-stretch rounded-[10px] text-[#cfe6ff] bg-[url(@/assets/bi_images/kuang.png)] bg-no-repeat bg-center bg-[length:100%_100%] py-1"
  >
    <div class="basis-[20%] flex flex-col items-center justify-center gap-1.5 text-center">
      <img :src="icon" :alt="title" class="w-[32px] h-[32px] object-contain" />
      <div class="title-text font-600 leading-[1.2]">
        <div v-for="(line, index) in splitTitle" :key="index">{{ line }}</div>
      </div>
    </div>
    <div class="flex-1 min-w-0 flex items-stretch basis-[80%]">
      <table class="w-full table-fixed border-collapse">
        <thead>
          <tr>
            <th class="biz-th text-[#e7f4ff] font-600 leading-[1.3] whitespace-nowrap overflow-visible tracking-[-0.5px]">周期</th>
            <th
              v-for="header in headers"
              :key="header"
              class="biz-th text-[#e7f4ff] font-600 leading-[1.3] whitespace-nowrap overflow-visible tracking-[-0.5px]"
            >
              {{ header }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row">
            <td class="biz-td text-white text-center leading-[1.3] whitespace-nowrap overflow-visible tracking-[-0.5px]">{{ row }}</td>
            <td
              v-for="header in headers"
              :key="header + row"
              class="biz-td text-white text-center leading-[1.3] whitespace-nowrap overflow-visible tracking-[-0.5px]"
            >
              {{ sampleFn(title, header, row) }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(
  defineProps<{
    title: string;
    icon: string;
    headers: readonly string[];
    rows: readonly string[];
    sampleFn: (title: string, header: string, row: string) => string;
  }>(),
  {}
);

// 标题拆分规则映射
const titleSplitRules: Record<string, string[]> = {
  '双重预防': ['双重', '预防'],
  '控制回路': ['控制', '回路'],
  '设备可靠性': ['设备', '可靠性'],
  '工艺报警': ['工艺', '报警'],
  'SIS联锁旁路': ['SIS联锁', '旁路'],
  'GDS报警': ['GDS', '报警'],
  '特殊作业': ['特殊', '作业'],
  '人员聚集': ['人员', '聚集']
};

// 计算拆分后的标题
const splitTitle = computed(() => {
  // 移除所有空格、顿号等分隔符，获取纯净的标题
  const cleanTitle = props.title.replace(/[、，,\s]/g, '');

  // 如果有匹配的拆分规则，使用规则拆分
  if (titleSplitRules[cleanTitle]) {
    return titleSplitRules[cleanTitle];
  }

  // 没有匹配规则，返回原标题
  return [props.title];
});
</script>

<style scoped>
.biz-th {
  font-size: clamp(11px, 0.7vw, 17px);
}
.biz-td {
  font-size: clamp(12px, 0.8vw, 18px);
}

/* 标题文本样式 */
.title-text {
  text-align: center;
  white-space: nowrap; /* 每行不换行 */
}
</style>
